<template>
  <el-row class="menu_box">
    <el-menu
      :collapse-transition="false"
      :default-active="menuKey"
      class="el_menu"
      @open="handleOpen"
      background-color="#fff"
      text-color="#000"
      active-text-color="#fff"
      ellipsis
      @close="handleClose"
    >
      <template v-for="item in props.menuData" :key="item.id">
        <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.id.toString()">
          <template #title>
            <!-- <el-icon>
              <Setting />
            </el-icon> -->
            <span>{{ item.title || item.name }}</span>
          </template>
          <MenItem
            v-if="item.children && item.children.length > 0"
            :menuData="item.children"
          ></MenItem>
        </el-sub-menu>
        <el-menu-item v-else :index="item.id.toString()" @click="targetRouter(item)">
          <template #title>
            <!-- <el-icon>
              <Setting />
            </el-icon> -->
            <span>{{ item.title || item.name }}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </el-row>
</template>
<script lang="ts" setup>
import { ref, watch, withDefaults } from 'vue'
import { Props } from '@/types/menu'
import MenItem from '@/components/Menu/MenItemCom.vue'
import { useRoute } from 'vue-router'
import { targetRouter } from './hook/index'

const menuKey = ref('')
const route = useRoute()

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const recombinationArray = (arr: Array<any>) => {
  const newArr: Array<any> = []
  arr.forEach((item) => {
    if (item?.children && item.children.length > 0) {
      newArr.push(item)
      newArr.push(...recombinationArray(item.children))
    } else {
      newArr.push(item)
    }
  })
  return newArr
}

const props = withDefaults(defineProps<Props>(), {
  menuData: () => [
    // {
    //   title: '角色管理',
    //   id: '1',
    //   url: '/rolelist'
    // },
    {
      title: '应用管理',
      id: '2',
      url: '/appList'
    },
    {
      title: '菜单管理',
      id: '4',
      url: '/menulist'
    },
    {
      title: '聚合地图',
      id: '3',
      url: '/polymerization'
    },
    {
      title: 'echarts地图',
      id: '9',
      url: '/echartsMap'
    },
    {
      title: '中国地图',
      id: '10',
      url: '/chinaMap'
    },
    {
      title: '信科解密',
      id: '11',
      url: '/decrypt'
    },
    {
      title: '常用echarts图表',
      id: '12',
      url: '/',
      children: [
        {
          title: '柱状图',
          id: '12-1',
          url: '/echartsList'
        }
      ]
    },
    {
      title: '工具箱',
      id: '13',
      url: '/',
      children: [
        {
          title: '备忘录',
          id: '13-1',
          url: '/remark'
        },
        {
          title: '百万条数据渲染',
          id: '13-3',
          url: '/renderList'
        },
        {
          title: 'grid自适应布局',
          id: '13-4',
          url: '/gridContainer'
        },
        {
          title: '长任务优化',
          id: '13-5',
          url: '/tasklist'
        }
      ]
    },
    {
      title: 'AES解密',
      id: '14',
      url: '/aecrypt'
    }
  ]
})

watch(
  () => route,
  (newValue: any) => {
    recombinationArray(props.menuData).filter((item) => {
      if (item.url === newValue?.path) {
        menuKey.value = item.id.toString()
      }
    })
  },
  { deep: true, immediate: true }
)
</script>
<style lang="less" scoped>
.menu_box {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  background: #fff;

  :deep(.el-menu) {
    border: none;

    .el-menu-item.is-active {
      background: #306dff;
    }
  }
}

.el_menu {
  width: 100%;
}
</style>
